﻿@col-text: #F0F0F0;

@col-grey-bg1: #555;
@col-grey-bg2: #5F5F5F;
@col-grey-fg1: #D0D0D0;
@col-grey-fg2: #B8B8B8;

@col-almond-bg1: #454037;
@col-almond-bg2: #534f48;
@col-almond-fg1: #dbcf97;
@col-almond-fg2: #ebdeb2;

@col-red-bg1: #33110c;
@col-red-bg2: #581a0f;
@col-red-fg1: #ff371b;
@col-red-fg2: #ff5f42;

@col-orange-bg1: #312202;
@col-orange-bg2: #60370a;
@col-orange-fg1: #e96b00;
@col-orange-fg2: #ffa03a; 

@col-lightgreen-bg1: #152101;
@col-lightgreen-bg2: #375308;
@col-lightgreen-fg1: #50c400;
@col-lightgreen-fg2: #8cf837; 

@col-forestgreen-bg1: #032b0c;
@col-forestgreen-bg2: #096b1f;
@col-forestgreen-fg1: #00cb2e;
@col-forestgreen-fg2: #3af163; 

@col-azure-bg1: #0c1f2b;
@col-azure-bg2: #1d628e;
@col-azure-fg1: #2e98db;
@col-azure-fg2: #6dc7ff; 

@col-teal-bg1: #0a2b2f;
@col-teal-bg2: #0b5862;
@col-teal-fg1: #16b6ca;
@col-teal-fg2: #00e3ff; 

@col-blue-bg1: #080d24;
@col-blue-bg2: #0d1e6b;
@col-blue-fg1: #2d53ff;
@col-blue-fg2: #6c86ff; 

@col-violet-bg1: #120231;
@col-violet-bg2: #3700a3;
@col-violet-fg1: #7b37ff;
@col-violet-fg2: #9e6cff; 

@col-pink-bg1: #2b1428;
@col-pink-bg2: #67255e;
@col-pink-fg1: #d518bd;
@col-pink-fg2: #ff6aec; 

@col-yellow-bg1: #21200e;
@col-yellow-bg2: #484400;
@col-yellow-fg1: #a9a117;
@col-yellow-fg2: #fff766; 

.theme(@name) {
    @themeclass: ~"theme-@{name}";
    .@{themeclass} {
        color: @col-text;
        @bg1 : "col-@{name}-bg1";
        @bg2 : "col-@{name}-bg2";
        @fg1 : "col-@{name}-fg1";
        @fg2 : "col-@{name}-fg2";
  
        &.bg-bg1 , .bg-bg1 { background-color: @@bg1; }
        &.bg-bg2 , .bg-bg2 { background-color: @@bg2; }
        &.bg-fg1 , .bg-fg1 { background-color: @@fg1; }
        &.bg-fg2 , .bg-fg2 { background-color: @@fg2; }
                      
        &.bd-bg1 , .bd-bg1 { border-color: @@bg1; }
        &.bd-bg2 , .bd-bg2 { border-color: @@bg2; }
        &.bd-fg1 , .bd-fg1 { border-color: @@fg1; }
        &.bd-fg2 , .bd-fg2 { border-color: @@fg2; }
                      
        &.txt-bg1, .txt-bg1 { color: @@bg1; }
        &.txt-bg2, .txt-bg2 { color: @@bg2; }
        &.txt-fg1, .txt-fg1 { color: @@fg1; }
        &.txt-fg2, .txt-fg2 { color: @@fg2; }

        svg .stroke-bg1 { stroke: @@bg1; }
        svg .stroke-bg2 { stroke: @@bg2; }
        svg .stroke-fg1 { stroke: @@fg1; }
        svg .stroke-fg2 { stroke: @@fg2; }
        svg .stroke-txt { stroke: @col-text; }
        
        svg .fill-bg1 { fill: @@bg1; }
        svg .fill-bg2 { fill: @@bg2; }
        svg .fill-fg1 { fill: @@fg1; }
        svg .fill-fg2 { fill: @@fg2; }
        
        &.outline-bg1 , .outline-bg1 { outline-color: @@bg1; }
        &.outline-bg2 , .outline-bg2 { outline-color: @@bg2; }
        &.outline-fg1 , .outline-fg1 { outline-color: @@fg1; }
        &.outline-fg2 , .outline-fg2 { outline-color: @@fg2; }
    }
}

.theme("grey");
.theme("almond");
.theme("red");
.theme("orange");
.theme("lightgreen");
.theme("forestgreen");
.theme("azure");
.theme("teal");
.theme("blue");
.theme("violet");
.theme("pink");
.theme("yellow");